<template>
  <div>
    <br>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">

      </el-tab-pane>
      <el-tab-pane label="待处理" name="second">

      </el-tab-pane>

      <el-tab-pane label="待修改" name="third">

      </el-tab-pane>
      <el-tab-pane label="已完成" name="fourth">

      </el-tab-pane>
    </el-tabs>
    <div style="margin-top: 5px;">
      <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="g-title">
      车辆编制审批（{{total}}个）
    </div>
    <br>
    <el-table ref="multipleTable" :border="true" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" :header-cell-style="{background:'#F5F7FA'}">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="序号">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="单位名称">
        <el-button type="text" @click="dialogVisible = true">测试单位</el-button>
      </el-table-column>

      <el-table-column prop="reason" label="原因" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="time" label="提交时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="status" label="状态" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="update = true">修改编制</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="查看单位信息" :visible.sync="dialogVisible">
      <div style="padding: 20px;background-color: white;">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="background-color: #F6F6F6;padding: 10px;"><b>基本信息</b></div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>隶属类别：</b>{{ CompanyRes.SubLevName }}</div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>隶属类型：</b>{{ CompanyRes.TagName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light"><b>上级单位:</b></div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>单位名称：</b>{{ CompanyRes.CompanyName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light"><b>单位规格：</b></div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>单位性质：</b></div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>备注信息：</b></div>
          </el-col>
        </el-row>
        <br>
        <br>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="background-color: #F6F6F6;padding: 10px;"><b>人员信息</b></div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="5">
            <div class="grid-content bg-purple"><b>单位实有人数：</b>{{CompanyRes.DWSYNum}}人</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple"><b>单位编制人数：</b>0人</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple"><b>定向化岗位人数：</b>{{CompanyRes.DXHGWNum}}人</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple"><b>离休干部人数：</b>{{CompanyRes.LXGBNum}}人</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple"><b>退休干部人数：</b>{{CompanyRes.TXGBNum}}人</div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="12">
            <div class="grid-content bg-purple"><b>在职正省：</b>{{CompanyRes.ZZZSNum}}人</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light"><b>在职副省：</b>{{CompanyRes.ZZFSNum}}人</div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="12">
            <div class="grid-content bg-purple"><b>离休正省：</b>{{CompanyRes.LXZSNum}}人</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light"><b>离休副省：</b>{{CompanyRes.LXFSNum}}人</div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="12">
            <div class="grid-content bg-purple"><b>退休正省：</b>{{CompanyRes.TXZSNum}}人</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light"><b>退休副省：</b>{{CompanyRes.TXFSNum}}人</div>
          </el-col>
        </el-row>
      </div>

    </el-dialog>

    <el-dialog title="修改单位车辆编制" :visible.sync="update">
      <div style="padding: 20px;background-color: white;">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="background-color: #F6F6F6;padding: 10px;"><b>基本信息</b></div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>隶属类别：</b>{{ CompanyRes.SubLevName }}</div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>隶属类型：</b>{{ CompanyRes.TagName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light"><b>上级单位:</b></div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>单位名称：</b>{{ CompanyRes.CompanyName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light"><b>单位规格：</b></div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>单位性质：</b></div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="8">
            <div class="grid-content bg-purple"><b>备注信息：</b></div>
          </el-col>
        </el-row>
        <br>
        <br>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="background-color: #F6F6F6;padding: 10px;"><b>人员信息</b></div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="5">
            <div class="grid-content bg-purple"><b>单位实有人数：</b>{{CompanyRes.DWSYNum}}人</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple"><b>单位编制人数：</b>0人</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple"><b>定向化岗位人数：</b>{{CompanyRes.DXHGWNum}}人</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple"><b>离休干部人数：</b>{{CompanyRes.LXGBNum}}人</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple"><b>退休干部人数：</b>{{CompanyRes.TXGBNum}}人</div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="12">
            <div class="grid-content bg-purple"><b>在职正省：</b>{{CompanyRes.ZZZSNum}}人</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light"><b>在职副省：</b>{{CompanyRes.ZZFSNum}}人</div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="12">
            <div class="grid-content bg-purple"><b>离休正省：</b>{{CompanyRes.LXZSNum}}人</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light"><b>离休副省：</b>{{CompanyRes.LXFSNum}}人</div>
          </el-col>
        </el-row>
        <br>
        <el-row class="erow">
          <el-col :span="12">
            <div class="grid-content bg-purple"><b>退休正省：</b>{{CompanyRes.TXZSNum}}人</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light"><b>退休副省：</b>{{CompanyRes.TXFSNum}}人</div>
          </el-col>
        </el-row>
        <br>
        <br>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="background-color: #F6F6F6;padding: 10px;"><b>车辆编制</b></div>
          </el-col>
        </el-row>
        <br>

        <el-table :data="cars" style="width: 100%" :border="true" :header-cell-style="{background:'#F5F7FA'}">
          <el-table-column prop="nature" label="车辆性质">
          </el-table-column>
          <el-table-column label="在职省级干部用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ZZSJGBYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.ZZSJGBYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="离退休正省级干部用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.LTXZSJGBYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.LTXZSJGBYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="离休副省级干部用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.LXFSJGBYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.LXFSJGBYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="退休副省级干部用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.TXFSJGBYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.TXFSJGBYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="定向化实物保障岗位用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.DXHSWGWYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.DXHSWGWYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="机要通信用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.JYTXYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.JYTXYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="应急用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.YJBZYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.YJBZYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="机要通信与应急合一用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.JYTXYYJHYYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.JYTXYYJHYYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="离退休干部管理机构用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.LTXGBGLJGYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.LTXGBGLJGYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="调研视察督察用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.DYSCDCYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.DYSCDCYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="政务接待用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ZWJDYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.ZWJDYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="执法执勤用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ZFZQYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.ZFZQYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="特种专业技术用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ZFZQYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.ZFZQYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="业务用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.YWYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.YWYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="班车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.BC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.BC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="后勤服务用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.HQFWYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.HQFWYC}}</span>
            </template>
          </el-table-column>
          <el-table-column label="其他用车" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.QTYC" v-if="scope.row.nature == '修改后编制数'" type="text"></el-input>
              <span v-else>{{scope.row.QTYC}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="update = false">保存数据</el-button>
      </div>
    </el-dialog>

    <el-row style="padding: 32px 16px;">
        <el-col>
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="dpageSize" :total="dtotal"
            :current-page='dpageNo' @current-change="fetchData" @size-change="pageSizeChange">
          </el-pagination>
        </el-col>
      </el-row>
  </div>
</template>
<style>
  [v-cloak] {
    display: none;
  }


  @media screen and (min-width: 992px) {
    .modal-dialog {
      width: 992px;
    }
  }

  .g-title {
    height: 20px;
    padding-left: 8px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    border-left: 2px solid #f54e40;
    margin: 10px 0;
    display: inline-block;
  }

  .el-table th {
    background-color: #f5f7fa;
  }

  .el-dialog {
    -webkit-transform: none;
    transform: none;
    left: 0;
    position: relative;
    margin: 0 auto;
    background: #eef1f6;
  }

  .el-dialog__body {
    background-color: white;
    margin: 0px 10px;
  }

  .eluploadwrapper {
    display: inline-block;
    margin-left: 10px;
  }
</style>
<script>
  export default {
    data: function() {
      return {
        activeName: 'second',
        tabPosition: 'top',
        search: '',
        total: 1,
        pageNo: 1,
        pageSize: 10,
        listData: [],
        dtotal: 0,
        dpageNo: 1,
        dpageSize: 10,
        tableData: [{
          date: '1',
          reason: '',
          time: '2020-4-9',
          status: '省公车处负责人审批-通过',
          zip: 200333
        }],
        dialogVisible: false,
        update: false,
        table_col: [{
            name: '在职省级干部用车',
            en: 'ZZSJGBYC'
          },
          {
            name: '离退休正省级干部用车',
            en: 'LTXZSJGBYC'
          },
          {
            name: '离休副省级干部用车',
            en: 'LXFSJGBYC'
          },
          {
            name: '退休副省级干部用车',
            en: 'TXFSJGBYC'
          },
        ],
        CompanyRes: {
          SubLevName: '省直部门及所属单位', //隶属类别
          TagName: '省直其它单位', //隶属类型
          CompanyName: '测试单位', //单位名称
          DWSYNum: '0', //单位实有人数
          DXHGWNum: '0', //定向化岗位人数
          LXGBNum: '0', //离休干部人数
          TXGBNum: '0', //退休干部人数
          ZZZSNum: '0', //在职正省人数
          ZZFSNum: '0', //在职副省人数
          LXZSNum: '0', //离休正省人数
          LXFSNum: '0', //离休副省人数
          TXZSNum: '0', //退休正省人数
          TXFSNum: '0', //退休副省人数
        },
        cars: [{
          nature: '实有车辆数目',
          ZZSJGBYC: '0', //在职省级干部用车
          LTXZSJGBYC: '0', //离退休正省级干部用车
          LXFSJGBYC: '0', //离休副省级干部用车
          TXFSJGBYC: '0', //退休副省级干部用车
          DXHSWGWYC: '0', //定向化实物保障岗位用车
          JYTXYC: '0', //机要通信用车
          YJBZYC: '0', //应急用车
          JYTXYYJHYYC: '0', //机要通信与应急合一用车
          LTXGBGLJGYC: '0', //离退休干部管理机构用车
          DYSCDCYC: '0', //调研视察督察用车
          ZWJDYC: '0', //政务接待用车
          ZFZQYC: '0', //执法执勤用车
          TZZYJSYC: '0', //特种专业技术用车
          YWYC: '0', //业务用车
          BC: '0', //班车
          HQFWYC: '0', //后勤服务用车
          QTYC: '0', //其他用车
          readonly: true
        }, {
          nature: '现有编制数目',
          ZZSJGBYC: '0',
          LTXZSJGBYC: '0',
          LXFSJGBYC: '0',
          TXFSJGBYC: '0',
          DXHSWGWYC: '0',
          JYTXYC: '0',
          YJBZYC: '0',
          JYTXYYJHYYC: '0',
          LTXGBGLJGYC: '0',
          DYSCDCYC: '0',
          ZWJDYC: '0',
          ZFZQYC: '0',
          TZZYJSYC: '0',
          YWYC: '0',
          BC: '0',
          HQFWYC: '0',
          QTYC: '0',
          readonly: true
        }, {
          nature: '修改后编制数',
          ZZSJGBYC: '0',
          LTXZSJGBYC: '0',
          LXFSJGBYC: '0',
          TXFSJGBYC: '0',
          DXHSWGWYC: '0',
          JYTXYC: '0',
          YJBZYC: '0',
          JYTXYYJHYYC: '0',
          LTXGBGLJGYC: '0',
          DYSCDCYC: '0',
          ZWJDYC: '0',
          ZFZQYC: '0',
          TZZYJSYC: '0',
          YWYC: '0',
          BC: '0',
          HQFWYC: '0',
          QTYC: '0',
          readonly: false
        }]
      }
    },
    methods: {
    	handleClick(tab, event) {
    	},
    	handleSelectionChange(val) {
    		this.multipleSelection = val;
    	},
    	handleSizeChange(val) {
    		console.log(`每页 ${val} 条`);
    	},
    	handleCurrentChange(val) {
    		console.log(`当前页: ${val}`);
    	},


      fetchData(){
      },
      pageSizeChange(newSize) {
        this.pageSize = newSize;
        this.pageNo = 1;
        this.fetchData();
      },

    }
  }
</script>
